/**
 * 单个控制指令
 */
import React, { Component } from 'react';
import { Input, Select, Checkbox, Button, message } from 'antd';
import CommandShowItem, { typeObj } from './commandShowItem';

const Option = Select.Option;

const styles = {
	input: {
		display: 'inline-block',
		width: '4em',
		margin: '0 0.5em'
	},
	select: {
		width: '14em',
		float: 'left'
	},
	name: {
		display: 'inline-block',
		width: '12em'
	},
	h: {
		marginBottom: '0.5em'
	},
	box: {
		border: '1px solid #ccc',
		padding: '1em',
		borderRadius: '4px',
		marginBottom: '1em'
	},
	span: {
		margin: '0 0.5em',
		float: 'left'
	},
	value: {
		width: '100%'
	},
	valueV: {
		overflow: 'hidden'
	},
	save: {
		marginTop: '0.5em',
		textAlign: 'right'
	},
	margin: {
		marginRight: '0.5em'
	}
};

function typeToValue(type, valueLimit) {
	let values = null;
	switch (type) {
		case 'bool':
			return '{"true":"描述1","false":"描述2"}';
		case 'enum':
			values = `["${valueLimit.slice(1, valueLimit.length - 1).replace(/,\s/g, '", "')}"]`;
			values = JSON.parse(values);
			return JSON.stringify(values.map((key, i) => ({ [key]: `描述${i}` })));
		case 'uint16':
		case 'uint32':
			return JSON.stringify({ ...valueLimit, step: 1 });
		default:
			return `{"length":${valueLimit.len},"desc":"扩展类型描述信息"}`;
	}
}

class Control extends Component {
	constructor(props, context) {
		super(props, context);
		const { data, name } = props;
		this.state = {
			name,
			data,
			edit: !data.id,
			checked: !!data.isShow
		};
	}

	componentWillReceiveProps(nextProps) {
		if (nextProps.data !== this.props.data) {
			this.setStateFromProps(nextProps);
		}
	}

	setStateFromProps(props) {
		const { name, data } = props;
		this.setState({ name, data, checked: !!data.isShow });
	}

	pointChange = name => {
		const { dataPoint } = this.props;
		const target = dataPoint.find(d => d.identityName === name);
		const { identityName, showName, dataType, valueLimit } = target;
		const newData = {
			displayName: showName,
			name: identityName,
			type: dataType,
			value: typeToValue(dataType, valueLimit)
		};
		this.setState({ data: newData });
	}

	inputChange = e => {
		const { data } = this.state;
		const { name, value } = e.target;
		if (name === 'name') this.setState({ name: value });
		else {
			this.setState({ data: { ...data, value } });
		}
	}

	delete = () => {
		const { data } = this.props;
		this.props.delete(data.id);
	}

	save = () => {
		const { save, data: { id } } = this.props;
		const { data, name, checked } = this.state;
		const { displayName, type } = data;

		if (!name) return message.error('名称为必填项');
		if (!displayName) return message.error('数据点为必选项');

		let value = null;
		try {
			value = JSON.parse(data.value);
		} catch (error) {
			message.error('数据点值格式错误，请检查');
			return;
		}
		const newData = {
			id,
			commandName: name,
			displayName,
			type,
			name: data.name,
			value,
			isShow: checked * 1
		};
		save(newData);
		this.setState({ edit: false });
	}

	cancel = () => {
		const { data, cancel, index } = this.props;
		this.setStateFromProps(this.props);
		if (data.id) this.setState({ edit: false });
		else cancel(index);
	}

	render() {
		const { dataPoint } = this.props;
		const { edit, data, checked, name } = this.state;
		return edit ? (
			<div style={styles.box}>
				<div style={styles.h}>
					<label>指令名称：</label>
					<Input style={styles.name} onChange={this.inputChange} name="name" value={name} />
				</div>
				<div style={styles.h}>
					<Checkbox checked={checked} onChange={e => this.setState({ checked: e.target.checked })}>需要展示</Checkbox>
				</div>
				<div style={styles.h}>下发控制指令数据点：</div>
				<div style={styles.h}>
					<Select onChange={this.pointChange} value={data.name} style={styles.select}>
						{dataPoint.filter(d => d.readWriteType === 'status_writable').map(d => <Option value={d.identityName}>{d.identityName}</Option>)}
					</Select>
					<span style={styles.span}>{typeObj[data.type]}</span>
					<div style={styles.valueV}><Input style={styles.value} onChange={this.inputChange} name="value" value={data.value} /></div>
				</div>
				<hr />
				<div style={styles.save}>
					<Button onClick={this.cancel} style={styles.margin}>取消</Button>
					<Button onClick={this.save} type="primary">保存</Button>
				</div>
			</div>
		) : (
				<CommandShowItem
					data={data}
					point={dataPoint.find(d => d.identityName === data.name)}
					delete={this.delete}
					edit={() => this.setState({ edit: true })}
				/>
			);
	}
}

export default Control;
